/*
  学习目标：兄弟组件-状态提升
  0. cv静态结构
  步骤：
     1. 将子组件Husband内的state提升到共同的父组件
     2. 通过父传子, 访问原本的state传给HusBand
     3. HusBan赚钱通过子传父
     4. Wife花钱通过子传父
*/

import React, { Component } from 'react';
import Husband from './components/Husband';
import Wife from './components/Wife';

export default class App extends Component {
  //   1. 将子组件内的state提升到共同的父组件
  state = {
    money: 0,
  };

  // 4. 父组件定义赚钱的方法
  /* 赚钱方法 */
  handleMakeMoney = () => {
    this.setState({ money: this.state.money + 1000 });
  };

  // 7. App中定义花钱的方法
  handleCost = () => {
    this.setState({ money: this.state.money - 2000 });
  };
  render() {
    return (
      <div>
        <h1 style={{ textAlign: 'center' }}>家庭存款：</h1>
        <Husband
          // 2. 父传子state
          money={this.state.money}
          // 5. 子传父
          handleMakeMoney={this.handleMakeMoney}
        ></Husband>
        <hr />
        <Wife
          // 8. 子传父回调函数
          handleCost={this.handleCost}
        ></Wife>
      </div>
    );
  }
}
